<div class="row clearfix">
	<div class="col-md-5 column">
		<table width="100%">
            <tr>
                <td align="left">
                    <button class="btn btn-info" ng-click="createStockCategory()">Add Category</button>
                </td>
                <td align="right">
                    <tm-pagination conf="paginationConf_categories"></tm-pagination>
                </td>
            </tr>
        </table>
		<div id="warningMsgForCat"></div>
		<table id="cattable" class="table table-hover table-striped dataTable" role="grid">
			<thead>
				<tr role="row">
					<th style="white-space:nowrap;">No.</th>
					<th style="white-space:nowrap;">Category Name</th>
					<th style="white-space:nowrap;">Edit</th>
					<th></th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat='category in categories' ng-click="selectCurrentStockCategory($index)">
					<td width="20%">{{$index + 1}}</td>
					<td width="40%">
						<input type="text" ng-model="category.name" editable-categoryname
							id='category_name_{{category.name}}' class="inactive" readOnly maxlength="8" size="10"
							ng-disabled="category.id"/>
					</td>
					<td width="30%">
						<edit ng-Model="category" ng-show="showCatEdit && !category.id" 
							d-type="category" show-cat-edit="showCatEdit" master="master"><a>Edit</a></edit>
						<update ng-Model="category" ng-show="!showCatEdit && !category.id"
							d-type="category" show-cat-edit="showCatEdit" master="master"><a>Update</a></update> 
						<cancel ng-Model="category" ng-show="!showCatEdit && !category.id" 
							d-type="category" show-cat-edit="showCatEdit" master="master"> | <a>Cancel</a></cancel>
						<delete ng-Model="category" delete-func="deleteStockCategory(category.id)"
							ng-show="category.id"><a>Delete</a></delete>
					</td>
					<td width="10%"><span class="glyphicon glyphicon-ok" ng-show="selectedIndex==$index"></span></td>
				</tr>
			</tbody>
		</table>
		<table width="100%">
            <tr>
                <td align="left">
                    <button class="btn btn-info" ng-click="createStockCategory()">Add Category</button>
                </td>
                <td align="right">
                    <tm-pagination conf="paginationConf_categories"></tm-pagination>
                </td>
            </tr>
        </table>
	</div>
	<div class="col-md-7 column" ng-show="selectedCategory">
		<div>
			<h3>Stock List</h3>
		</div>
		<table width="100%">
            <tr>
                <td align="left">
                    <button class="btn btn-info" ng-click="createStock()">Add Stock</button>
                </td>
                <td align="right">
                    <tm-pagination conf="paginationConf_stocks"></tm-pagination>
                </td>
            </tr>
        </table>
		<div id="warningMsgForStock"></div>
		<table id="catstocktable" class="table table-hover table-striped dataTable" role="grid">
			<thead>
				<tr role="row">
					<th style="white-space:nowrap;">Stock Code</th>
					<th style="white-space:nowrap;">Stock Name</th>
					<th style="white-space:nowrap;">Status</th>
                    <th style="white-space:nowrap;">Yester Price</th>
                    <th style="white-space:nowrap;">Edit</th>
					<th></th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat='stock in stocksByCategory'">
					<td width="20%">
						<input type="text" ng-model="stock.code" editable-stockcode
							id='stock_code_{{stock.code}}' class="inactive" readOnly maxlength="6" size="6"/>
					</td>
					<td width="20%">{{stock.name}}</td>
					<td width="15%">{{stock.statusName}}</td>
					<td width="20%">{{stock.yesterPrice}}</td>
					<td width="15%">
						<edit ng-Model="stock" ng-show="showStockEdit && !stock.id" 
							d-type="stock" show-stock-edit="showStockEdit" master="master"><a>Edit</a></edit>
						<update ng-Model="stock" ng-show="!showStockEdit && !stock.id" 
							d-type="stock" show-stock-edit="showStockEdit" master="master"><a>Update</a></update> 
						<cancel ng-Model="stock" ng-show="!showStockEdit && !stock.id" 
							d-type="stock" show-stock-edit="showStockEdit" master="master"> | <a>Cancel</a></cancel>
						<delete ng-Model="stock" delete-func="deleteStockCatRelate(stock.id)"
							ng-show="stock.id"><a>Delete</a></delete>
					</td>
					<td width="10%"><span class="glyphicon glyphicon-ok" ng-show="selectedIndex==$index"></span></td>
				</tr>
			</tbody>
		</table>
		<table width="100%">
            <tr>
                <td align="left">
                    <button class="btn btn-info" ng-click="createStock()">Add Stock</button>
                </td>
                <td align="right">
                    <tm-pagination conf="paginationConf_stocks"></tm-pagination>
                </td>
            </tr>
        </table>
	</div>
</div>
